<template>
	<view class="container">
		<view class="tabs">
			<v-tabs :tabs="tabs" :value="current" :scroll="false" line-color="#2D63F9" active-color="#0005C9" style="width: 100%"
			 lineHeight="2px" height="70rpx" @change="changeTab"></v-tabs>
		</view>
		<view class="container-tabs__list">
			<!-- 订单列表 -->
			<block v-if="current == 4">
				<view class="afterSalesList" v-for="(item,index2) in records" :key="index2" @click="btnAfterDetailClick(item)">
					<view class="titileG">
						<view class="title">
							服务号:{{item.applyCode}}
						</view>
						<view class="labStatus" v-if="item.type == '1'">
							<image src="../../static/orderReturn.png" mode="widthFix"></image>
							退货
						</view>
						<view class="labStatus" v-else>
							<image src="../../static/orderBack.png" mode="widthFix"></image>
							换货
						</view>
					</view>
					<view class="orderGoods">
						
						<view class="box-thumbnail">
							<image :src="item.picList" mode="aspectFill"></image>
						</view>
						<view class="box-info">
							<view class="box-info__title">{{item.beforeGoodsName}}</view>
							<view class="box-info__total_amount">{{msgDict.applyNum}}：{{item.num}}</view>
						</view>
						<!-- <view class="orderType" >{{item.status}}</view> -->
					</view>
					<view class="bottomG">
						<view class="statusG">
							
							<view class="labStatus" v-if="item.type == '1'">
							  {{msgDict.youApplyReturn}}——{{item.status}}
							</view>
							<view class="labStatus" v-else>
							  {{msgDict.youApplyChange}}——{{item.status}}
							</view>
							
						</view>
						<uni-icons type="arrowright" color="#666" size="15"></uni-icons>
					</view>
					
				</view>
			</block>
			<block v-else>
				<view class="v-order-item" v-for="(item,index2) in records" :key="index2">
					<!-- 订单编号 -->
					<view class="v-order-item__Title">
						<view class="schoolName">
							{{item.schoolName}}
							<text class="order_code">
								{{item.saleType | filterSendType}}
							</text>
						</view>
						<text class="order_status" :style="item.status == 1 ?'color: #FFA200;':item.status == 6?'color:#C90099;':item.status == 8?'color:#6EB74B;':item.status == 2?'color:#A38800;':''">
							{{item.statusName}}
						</text>
					</view>
					 <view v-if="item.picList.length ==1">
						<view  class="v-order-item__box">	     	
							<view class="v-order-item__box-thumbnail">
								<image :src="item.picList[0]" />
								<view class="box-info__top">
									<!-- 标题和数量 -->
									<view class="box-info__title">{{item.goodsName}}</view>
									<view class="box-info__attr">{{msgDict.size}}:{{item.size}}</view>
								</view>
							</view>
						
							<view class="v-order-item__box-info">						    
								<view class="box-info__total_amount">￥{{item.totalPrice}}</view>
								<view class="box-info__status">x{{item.orderNum}}</view>
							</view>
						</view>
					 </view>
					 <view v-else class="scrollItem">
						 <scroll-view scroll-x="true" class="scroV" show-scrollbar='false'>
							<view class="ImgItem" v-for="(item1, index3) in item.picList" :key="index3">
								<image :src="item1" mode="aspectFill" 
								></image>
							</view>
						 </scroll-view>
						<view class="scrollItem_right">
							<view class="scrollItem_amount">￥{{item.totalPrice}}</view>
							<view class="scrollItem_status">x{{item.orderNum}}</view>
						</view>
					 </view>
					<view class="v-order-item__btnNum">
						<!-- 评价 -->
						<view class="btnCheck" v-if="item.status > 7 && item.status <= 9" @click="btnAppraiseClick(item.orderCode,index2)">
							{{msgDict.evaluate}}
						</view>
						<!-- 取消 -->
						<view class="btnCheck" v-if="item.status == 1 || item.status == 4 || item.status == 6" @click="btnCancelOrderClick(item.orderCode,index2)">
							{{msgDict.cancelOrder}}
						</view>
						<!-- 售后 -->
						<view class="btnCheck" v-if="item.status == 8"  @click="btnAftersalesClick(item.orderCode,item.statusName)">
							{{msgDict.orderType3}}
						</view>
						<!-- 物流 -->
						<view class="btnCheck" v-if="item.status > 6 && item.status <= 9"  @click="checkLogistics(item.orderCode,index2)">
							{{msgDict.logistics}}
						</view>
						<!-- 查看详情 -->
						<view class="btnSure" @click="clickNext(item.orderCode,item.saleType)">
							{{msgDict.details}}
						</view>
					</view>
				</view>
			</block>
			
			
			<view class="empty" v-if="records.length == 0">
				<view>
					<image class="empty-img" src="../../static/order_market_none.png"></image>
				</view>
				<view>
				<!-- {{i18n.empty}} -->
					<view class="empty-text">{{msgDict.noOrder}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabs from '@/components/v-tabs/v-tabs.vue';
	import {orders,listApplys,cancelOrder} from '@/api/index.js'
	export default {
		components:{
			tabs
			// uniCountdown
		},
		data() {
			return {
				current: 0,
				orderStatus:'',
				tabs: ['全部', '待付款', '已支付', '收集尺码', '售后'],
				// rowData: [],
				records: [],
				page: 1,
				pagesize: 20,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				userId:undefined,
				isAllowBack:false,
				msgDict:{}

			}
		},
		onLoad(options) {
			 let msgDict = getApp().globalData.$t('order');
			 this.msgDict = msgDict;
			 
			this.tabs=[msgDict.orderType4,msgDict.orderType1,msgDict.orderType2,msgDict.orderType5,msgDict.orderType3]
			this.userId = getApp().globalData.userId
			let current = parseInt(options.current);
			this.current = current;

			 if (current ==  4) {
			 	this.requestListApplys();
			 } else{
			 	this.orderStatus = this.getOrderStatus(current);
			 	//我的项目中只赋值一次, 所以直接设为true了
			 	 this.initDataList(false);
			 }
			
		},
		onShow() {
			
			if (this.isAllowBack) {
				
			this.records = []
			// this.page = 1
			this.isLoadMore = false
			this.initDataList(false);
				
			}

		},
		methods: {
			
			
			async initDataList(showType) {
				
				let {result} = await orders({
					orderStatus:this.orderStatus,
					userId:this.userId

				},showType);
				this.records =  result
				
			},
            async requestListApplys() {
				
				let {result} = await listApplys({
					
					userId:this.userId

				});
				this.records =  result
				
			},
			async requestCancelOrder(code,index) {
				try{		
				let {result} = await cancelOrder({
					orderCode:code,
					userId:this.userId
				});
				uni.showToast({
					title:'取消成功！',
					icon:'none'
				})
				this.initDataList(true);
				} catch(err) {
					// console.log('我请求啦',err);
					
				}		
			},
	
			//评价
			btnAppraiseClick(e,index){
				
				let item = this.records[index];
				
				if (item.deliveryNum == 1) {
				    uni.navigateTo({
				    	url:'../appraise/appraise?deliveryCode='+ item.deliveryCode[0]+'&orderCode='+e+'&statusName='+item.statusName
				    })
				} else{
					uni.navigateTo({
						url:'../LogisticsList/LogisticsList?orderCode='+e+'&statusName='+item.statusName
					})	
				}
				
				
			},
			// 关闭订单
			btnCancelOrderClick(orderCode,index) {
				let that = this;
				// console.log(e)
				uni.showModal({
					title:this.msgDict.Tips,
					content:this.msgDict.msgCancelOrder,
					cancelText:this.msgDict.cancel,
					confirmText:this.msgDict.confirm,
					success(res) {
						if (res.confirm) {
							
						that.requestCancelOrder(orderCode,index);
							
						}
					}
					
				})
				
									
			},
			//售后详情
			btnAfterDetailClick(item){
				uni.navigateTo({
					url:'../aftersalesDetail/aftersalesDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//售后
			btnAftersalesClick(e,statusName){
				
				if (this.current == 4) {
					uni.navigateTo({
						url:'../aftersalesList/aftersalesList?orderCode='+e+'&currentIndex=2&statusName='+statusName
					})
					
				} else{
				uni.navigateTo({
					url:'../aftersalesList/aftersalesList?orderCode='+e+'&currentIndex=1&statusName='+statusName
				})	
				}
				
				
			},
			//查看物流
			checkLogistics(e,index) {
				
				let item = this.records[index];
				if (item.deliveryNum == 1) {
					uni.navigateTo({
						url:'../LogisticsDetail/LogisticsDetail?orderCode='+item.deliveryCode[0]+'&statusName='+item.statusName
					})
					
				}else{
					uni.navigateTo({
						url:'../LogisticsList/LogisticsList?orderCode='+e+'&statusName='+item.statusName
						
						
					})
				}

			},
			//查看详情
		    clickNext(e,saleType) {
				
				uni.navigateTo({
					url:'../orderDetail/orderDetail?orderCode='+e+'&saleType='+saleType
				})
			},

			//确认收货
			async receiveGoods(e) {
				const json = await confirm({
					orderId: e
				})
				uni.showToast({
					title: json.msg,
					icon: 'none'
				})
				if(json.code == 0) {
					this.records = []
					this.page = 1
					this.isLoadMore = false
					this.initDataList(true);
				}
			},
			//分页
			// 下拉刷新
			onPullDownRefresh() {
			
				let _self = this
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新
					_self.page = 1;
					_self.records = []
					_self.isLoadMore = false
					_self.initDataList(false);
				}, 1000);
			},
			// 上拉加载

			// onReachBottom() {
			// 	console.log(this.isLoadMore)
			// 	if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				
			// 		this.isLoadMore = true
			// 		this.page += 1
			// 		this.initDataList()
			// 	}
			// },
			
			//立即支付
			async onClickpay(e) {
				const json = await getPayInfo({
					orderId:e.id
				})
				if(json.code == 0) {
					if((JSON.stringify(json.data) != "{}")) {
						let obj = json.data
			let obj1 = {
					'noncestr': obj.noncestr,
					'package': obj.package, // 固定值，以微信支付文档为主
					'timestamp': obj.timestamp,
					'appid': obj.appid,
					'partnerid': obj.partnerid,
					'prepayid': obj.prepayid,
					'sign': obj.sign // 根据签名算法生成签名
				}
				let orderInfo = obj1
				console.log(orderInfo)
				console.log(JSON.stringify(orderInfo))
				// #ifdef APP-PLUS
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo:JSON.stringify(orderInfo), 
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						
						
						uni.navigateTo({
							url: "/pages/cart/paySuccess?type=3&orderId=" + e.id
						})
					},
					fail: function(err) {
						
						uni.showToast({
							title:'支付失败',
							icon:'none'
						})
						console.log('fail:' + JSON.stringify(err));
					}
				
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					'provider': 'wxpay',
					'nonceStr': obj.nonceStr,
					'package': obj.package, // 固定值，以微信支付文档为主
					'timeStamp': obj.timeStamp,
					'signType': 'MD5',
					'paySign': obj.sign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						
						
							// this.onPullDownRefresh()
						
						uni.navigateTo({
							url: "/pages/cart/paySuccess?type=3&orderId=" + e.id
						})
					},
					fail: function(err) {
						uni.showToast({
							title:'支付失败',
							icon:'none'
						})
						console.log('fail:' + JSON.stringify(err));
					}
				
				});
				// #endif
					}
				} else {
					uni.showToast({
						title:'支付失败',
						icon:'none'
					})
				}
				
				
			},
			getOrderStatus(index){
				
				switch (index){
					case 0:
					     return '3'
						break;
					case 1:
					     return '1'
						break;
					case 2:
					     return '2'
						break;
					case 3:
					     return '5'
						break;
					case 4:
					     return '4'
						break;				
					default:
					   return '0'
						break;
				}
			},
			changeTab(index) {
			
				this.current = index
				this.records = []
				this.page = 1
				this.isLoadMore = false
				
				if(index == 4){
					this.requestListApplys();
				}else{
					this.orderStatus = this.getOrderStatus(index);
					this.initDataList(false);
				}
				
				
			},



		},
	filters: {
			filterOrderStatus(val) {
				let index= parseInt(val);
				switch (index){
					case 0:
					  return ''
						break;
					case 1:
					  return '待支付'
						break;
				    case 2:
				      return '已过期'
				    	break;			
					default:
					  return ''
						break;
				}
				
				
			},
			filterSendType(val) {
				
				if (val == '1') {
					return '预售'
				} else{
					return '零售'
				}
			},
			iszero(val) {

				if (parseInt(val, 10) > 0) {

					return val;

				} else {
					return '0'
				}

			},
			
			filterBtnStatus(val) {
				
				const num = parseInt(val, 10);
				switch (num) {
					case 0:
						{
							return '待付款';
							break;
						}
					case 1:
						{
							return '超期';
							break
						}
					case 3:
						{
							return '已付款';
							break;
						}
					case 4:
						{
							return '取消';
							break;
						}
					case 5:
						{
							return '已完成';
							break;
						}
					case 6:
						{
							return '待收货';
							break;
						}
					case 7:
						{
							return '售后处理中';
							break;
						}
					case 8:
						{
							return '售后已完成';
							break;
						}		
					default:
						{
							return '';
							break;
						}

				}
			}
		},
		computed: {
		
		}




	}
</script>

<style lang="scss">
    page{
		height: 100%;
		background-color: #F8F9FD;
	}
	.container {

		background-color: #F8F9FD;
		padding: 130upx 30upx 30upx;

		.tabs {
			position: fixed;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100upx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0px 0px 10upx rgba(0, 0, 0, 0.1);
			border-radius: 0px 0px 10upx 10upx;
			z-index: 3;
		}

		.container-tabs__list {
			height: 100%;
			background-color: #F8F9FD;
            // margin-top: 130upx;
			.afterSalesList{
			     background-color: #fff;
				 padding: 30rpx 30rpx 0;
				 border-radius: 10rpx;
				 border-bottom: 1rpx solid #f2f2f2;
				 
				 margin-bottom: 20rpx;
				 .titileG{
					 
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 margin-bottom: 32rpx;
					 .title{
							 color: #333333;
							 font-size: 26rpx;
							 
					 }
					 .labStatus{
						 color: #333333;
						 font-size: 26rpx;
						 image{
							width: 30rpx;
							height: auto;
							position: relative;
							top: 5rpx;
							right: 10rpx;
						 }
					 }
					 
				 }
				 
				.orderGoods {
					
					display: flex;
					flex-direction: row;
					
					.box-thumbnail {
						width: 150upx;
						height: 150upx;
						margin-right: 20upx;
				
						image {
							width: 100%;
							height: 100%;
							border-radius: 8px;
							border: 1rpx solid #f2f2f2;
						}
					}
				
					.box-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						.box-info__title {
							font-weight: 400;
							font-size: 32upx;
							color: #333333;
						}
						.box-info__total_amount {
							font-weight: 400;
							font-size: 28upx;
							color: #999;
						}
					}
					.orderType{
						height: 150rpx;
						line-height: 150rpx;
						padding: 10rpx 0;
						width: 100rpx;
						color: #3679FF;
						font-size: 26rpx;
					}
				}
				.bottomG{
					// background-color: rgba(192,192,192,0.9);
					border-top: thin solid #f2f2f2;
					height: 90rpx;
					margin-top: 40rpx;
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					// border-radius: 10rpx;
					margin-bottom: 20rpx;
					.statusG{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: 400;
						color: #666;
						
					}
				
				}
				
			}
			
		}

		.v-order-item {
			background-color: #fff;
			box-shadow: 0px 0px 10upx rgba(0, 0, 0, 0.1);
			border-radius: 10upx;
			padding: 30upx;
			margin-bottom: 30upx;
			
			.scrollItem{
				display: flex;
				justify-content: space-between;
				height: 110rpx;
				
				.scroV{
					height: 100%;
				    background: #fff;
					width: 480rpx;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					white-space: nowrap;
					
					.ImgItem{
						
						// box-shadow: 0px 2px 10px 0px #EEF0F4;
						width: 106rpx;
						height: 106rpx;
						
						margin-right: 20rpx;
					    display: inline-block;
					   
					   
					   image{
						   border-radius: 8rpx;
						   border: 1rpx solid #f2f2f2;
						   height: 106rpx;
						   width: 106rpx;
					   }
						
					}
					
				}
				.scrollItem_right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;

					.scrollItem_amount{
						font-weight: 400;
						font-size: 30upx;
						display: flex;
						justify-content: space-between;
						color: #F54353;
					}
					.scrollItem_status{
						color: #999;
						font-size: 28upx;
						margin-top: 20upx;
						font-size: 24upx;
						text-align: right;
					}
				}
					
			}

			&__btnNum {
				
				display: flex;
				justify-content: flex-end;
				// background-color: #007AFF;
				align-items: center;
				padding-top: 40rpx;


				.btnCheck {

					width: 128upx;
					height: 52upx;
					border-radius: 27upx;
					border: thin solid #CECECE;
					font-size: 22upx;
					color: #333;
					font-weight: 400;
					line-height: 54rpx;
					text-align: center;
					margin-right: 20upx;

				}

				.btnSure {
					
					width: 128upx;
					height: 52upx;
					border-radius: 27upx;
					border: thin solid #2D63F9;
					font-weight: 400;
					color: #0005C9;
					font-size: 22upx;
					text-align: center;
					line-height: 54rpx;

				}
			}

			&__Title {
				// height: 60upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				.schoolName{
					height: 28upx;
					font-size: 28upx;
					font-weight: 400;
					color: #333333;
					line-height: 28upx;
					
					.order_code {
						background-color: #F2F8FF;
						font-weight: 400;
						color: #3679FF;
						font-size: 22rpx;
						padding: 3rpx 10rpx;
						border-radius: 5rpx;
						margin-left: 20rpx;
					}
				}

				

				.order_status {
					height: 37upx;
					font-size: 26upx;
					font-weight: 400;
					color: #444444;
					line-height: 37upx;
				}

			}


			&__box {
				display: flex;

				&-thumbnail {
					// width: 220upx;
					
					margin-right: 20upx;
					display: flex;
					
					image {
						box-shadow: 0px 2px 10px 0px #EEF0F4;
						width: 106rpx;
						height: 106rpx;
						border-radius: 8px;
						border: 1rpx solid #f2f2f2;
					}
					.box-info__top{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						.box-info__title {
							font-weight: 500;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							color: #333333;
						}
						
						.box-info__attr {
							color: #999;
							font-size: 20upx;
							margin-top: 20upx;
							font-size: 24upx;
							// text-align: right;
						
						}
					}
					
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					overflow: hidden;
                    align-items: flex-end;
					// height: 100%;

					

					.goods_status {

						height: 37upx;
						font-size: 26upx;
						font-weight: 400;
						color: #C24E4E;
						line-height: 37upx;
					}

					.box-info__total_amount {
						font-size: 32upx;
						color: #F54353;
						

						
					}

					.box-info__status {
						font-size: 24upx;
						color: #999;
					}
				}
			}

			&__total {
				display: flex;
				float: right;
				justify-content: center;
				height: 90upx;

				.text1 {

					height: 26upx;
					font-size: 26upx;
					font-weight: 400;
					color: #C7C7C7;
					line-height: 26upx;
				}

				.text2 {

					height: 26upx;
					font-size: 26upx;
					font-weight: 400;
					color: #333333;
					line-height: 26upx;
				}

				.text3 {

					height: 26upx;
					font-size: 22upx;
					font-weight: 400;
					color: #333333;
					line-height: 26upx;
				}
			}

			.v-order-item__box+.v-order-item__box {
				margin-top: 30upx;
				padding-top: 30upx;
			}
		}
	}
	.empty {
				margin-top: 140rpx;
				position: relative;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// background: #F4F4F4;
			
				.empty-img {
					margin-top: 40upx;
					width: 386upx;
					height:386upx;
				}
			
				.empty-text {
					margin-top: 10upx;
					font-size: 26upx;
					color: #ccc;
					display: flex;
					align-items: center;
					
				}
			
			
	}
</style>
